<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Proxy 与 Reflect</title>
</head>

<body>
    <h1>Proxy 与 Reflect</h1>
    <script>

        const person = {
            name: "SunWuKong",
            age: 12
        };

        /* 
        通过Proxy对于对象person进行拦截操作，这里一共拦截了三种操作 读取属性 设置属性 删除属性
        */
        const proxyPerson = new Proxy(person, {

            get(target, prop) {
                console.log('劫持get()', prop)
                return Reflect.get(target, prop)
            },

            set(target, prop, val) {
                console.log('劫持set()', prop, val)
                return Reflect.set(target, prop, val); // (2)
            },

            deleteProperty(target, prop) {
                console.log('劫持delete属性', prop)
                return Reflect.deleteProperty(target, prop)
            }
        });
        // 读取属性值
        console.log(proxyPerson === person)
        console.log(proxyPerson.name, proxyPerson.age)
        // 设置属性值
        proxyPerson.name = 'bob'
        proxyPerson.age = 13
        console.log(person)
        // 添加属性
        proxyPerson.sex = '男'
        console.log(person)
        // 删除属性
        delete proxyPerson.sex
        console.log(person)
    </script>
</body>

</html>